<template>
  <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit" >
    <div style="height: 70vh;overflow-y: scroll;">
      <a-descriptions title="主体信息" :column="4" bordered size="large">
      <a-descriptions-item label="会员UID" :span="1">{{ detailInfo.info?.user_id }}</a-descriptions-item>
      <a-descriptions-item label="会员名" :span="1">{{ detailInfo.info?.user?.user_name }}</a-descriptions-item>
      <a-descriptions-item label="真实姓名" :span="1">{{ detailInfo.info?.user?.true_name }}</a-descriptions-item>
      <a-descriptions-item label="国家地区" :span="1">{{ detailInfo.info?.area?.name }}</a-descriptions-item>
      <a-descriptions-item label="主订单ID" :span="1">{{ detailInfo.info?.orderInfo?.id }}</a-descriptions-item>
      <a-descriptions-item label="主订单号" :span="1">{{ detailInfo.info?.orderInfo?.order_sn }}</a-descriptions-item>
      <a-descriptions-item label="申请时间" :span="1">{{ detailInfo.info?.create_time }}</a-descriptions-item>
      <a-descriptions-item label="售后状态" :span="1">{{ detailInfo.info?.state_text }} 【 {{ detailInfo.info?.type_text
      }} 】</a-descriptions-item>
      <a-descriptions-item label="会员反馈描述" :span="4">{{ detailInfo.info?.describe }}</a-descriptions-item>
      <a-descriptions-item label="回邮快递" :span="4" v-if="detailInfo.info?.express_name==''">
         <a-button type="outline" @click="openExpress('add')"> 添加</a-button>
      </a-descriptions-item>
      <a-descriptions-item label="回邮快递" :span="4" v-else>
        <div style="display: flex;align-items: center;">
          <div style="margin-right: 20px;">{{ detailInfo.info?.express_name }} {{ detailInfo.info?.express_code }}</div>
          <a-button type="outline" size="mini" status="danger" @click="openExpress('edit')">修改</a-button>
        </div>
      
      </a-descriptions-item>
    </a-descriptions>
    <div v-if="detailInfo?.fileData && detailInfo?.fileData?.length>0">
      <div style="margin:10px 0">反馈图片｜视频</div>
      <div style="width: 100%; display: flex;">
        <div >
          <a-carousel :style="{ width: '400px', height: '540px' }" @change="change">
            <a-carousel-item v-for="(file,index) in detailInfo.fileData">
              <div  v-if="file.type=='image'">
                <a-image   :src="file.path" width="400"  height="540" />
              </div>
              
              <div v-else>
                <video :id="`my_video_${index}`"  class="video-js" controls width="400" height="540">
                  <source :src="file.path" type="application/x-mpegURL" />
                </video>
              </div>
            </a-carousel-item>
          </a-carousel>
        </div>

      </div>
    </div>
    <div style="margin:10px 0">商品信息</div>
    <a-table :columns="columns" :data="detailInfo.sku_list" :stripe="true" :pagination="false">

    </a-table>
    </div>
    <a-modal :visible="modalInfo.visible" :title="modalInfo.title" @before-ok="expressOk" @cancel="modalInfo.visible=false">
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :auto-label-width="true"
      >
        <a-form-item label="快递名称" field="express_id">
          <sa-select :fieldNames="{value:'id',label:'express_name_zh'}" :data="expressInfo.express_list" v-model="formData.express_id"></sa-select>
        </a-form-item>
        <a-form-item label="快递单号" field="express_code">
          <a-input v-model="formData.express_code" placeholder="请输入" allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
   


  </component>
</template>

<script setup>
import { ref, reactive, computed, watch, onBeforeUnmount, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import SaSelect from '@cps/sa-select/index.vue'
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import videojs from 'video.js';
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'
const emit = defineEmits(["success"]);
const visible = ref(false);
const loading = ref(false);
const formRef=ref()
const spinLoading = ref(false)
let title = computed(() => {
  return "详情"
});
const modalInfo=reactive({
  visible:false,
  title:'',
})
const formData = reactive({
  id:'',
  express_code:'',
  express_id:'',
})
const rules = ref({
  express_code: [{ required: true, message: "请输入" }],
  express_id: [{ required: true, message: "请选择" }],
});
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 200 },
  { title: 'SKU', dataIndex: 'sku', width: 200 },
  { title: '商品名称', dataIndex: 'goods_name', width: 200 },
  { title: '数量', dataIndex: 'num', width: 120 },
  { title: '价格', dataIndex: 'price', width: 120 },
  { title: '收货状态', dataIndex: 'receive_state_text', width: 150 },
  { title: '检查状态', dataIndex: 'state_text', width: 150 },
])
const detailInfo = ref({})
const getData = async () => {////在頁面打開之前須加載完成要不然播放报錯
  const { data } = await AsApi.back_exchange_detail(formData.id)
  detailInfo.value = { ...data }
  data.fileData?.length>0? data.fileData?.forEach((item,index) => {
    if(item.type=='audio'){

      initVideo(item.path,index)
    }
    if(index==data.fileData?.length-1){
      visible.value = true;
    }
  }):visible.value = true;
  
}

const expressInfo =ref({})
const openExpress=async(type)=>{
  formRef.value?.resetFields()
  if(type=='add'){
     modalInfo.title='添加回邮快递'
  }else{
    formData.express_id=detailInfo.value.info?.express_id
    formData.express_code=detailInfo.value.info?.express_code
    formData.id=detailInfo.value?.info?.id
    modalInfo.title='修改回邮快递'
  }
  modalInfo.visible=true
}
const getExpress=async()=>{
  const {data} =await AsApi.express_list(detailInfo.value?.info?.id)
  expressInfo.value={...data}
}
const player = ref(null)
const players = ref(null)
const initVideo = async (src,index) => {
  const existingPlayer = videojs.getPlayer(`my_video_${index}`)
  if (existingPlayer) {
    existingPlayer.dispose(); 
  }
  player.value = videojs(`my_video_${index}`, {
    techOrder: ['html5'],
    sources: [
      {
        src:  src,
        type: 'application/x-mpegURL',
      },
    ],
  });
  players.value?.push(player.value); 
}
// 打开弹框
const open = async (data) => {
  visible.value = true
  formData.id=data.id
  spinLoading.value = true
  await getData()
  await getExpress()
};
// 数据保存
const expressOk = throttle(async (done) => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    try {
      let data = { ...formData };
      let result = {};
      result = await AsApi.edit_back_exchange_express(data);
      if (result.code === 200) {
        Message.success("操作成功");
        modalInfo.visible=false
        await getData()
        done(true);
      }
      // 防止连续点击提交

        loading.value = false;
    } catch {
      loading.value = false;
    }
  }
  done(false);
 
}, 100);

// 关闭弹窗
onBeforeUnmount(() => {
      // 销毁所有播放器实例，避免内存泄漏
      players.value?.forEach((player) => {
        if (player) {
          player.dispose();
        }
      });
    });
// 关闭弹窗
const close = () => {
  visible.value = false
  players.value?.forEach((player) => {
        if (player) {
          player.dispose();
        }
  });
};
defineExpose({ open, getData });
</script>